<!doctype html>
<html>
<head>

  <title></title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../../polymer.html">
  <link rel="import" href="shared-styles.html">
  <link rel="import" href="x-foo.html">
</head>
<body unresolved>

  <style is="custom-style" module="shared-styles"></style>

  <style is="custom-style">
    .zot {
      background-color: var(--zot);
    }
  </style>

  <div class="bar">.bar from custom-style with module shared-styles</div>
  <div class="foo">.foo should not be colored</div>
  <div class="zot">.zot from custom-style using var in custom-style with module shared-styles</div>

  <hr>

  <x-foo></x-foo>
  

</body>
</html>
